<template lang="pug">
  div.page.page-2
    div.side-bar.left
      ModuleBorderDuty(:F0000003="F0000003" :F0000002="F0000002" :F0000001="F0000001")
      ModuleReportIncidentToday(:F0000005="F0000005" :F0000006="F0000006" :F0000007="F0000007" :sjsbData="sjsbData")
    div.center
      ModuleMapInfo
    div.side-bar.right
      ModuleCaptureResult(:F0000012="F0000012" :F0000013="F0000013" :F0000014="F0000014" :F0000015="F0000015" :F0000016="F0000016" :F0000017="F0000017" :F0000018="F0000018" :F0000019="F0000019")
      ModuleReportIncident
</template>

<script>
import ModuleBorderDuty from "./components/ModuleBorderDuty";
import ModuleReportIncidentToday from "./components/ModuleReportIncidentToday";
import ModuleReportIncident from "./components/ModuleReportIncident";
import ModuleCaptureResult from "./components/ModuleCaptureResult";
import ModuleMapInfo from './components/ModuleMapInfo';
import {mapMutations} from "vuex";
export default {
  name: "index",
  data() {
    return {
			F0000001:'0',
			F0000002:'0',
			F0000003:'0',
			F0000005:'0',
			F0000006:'0',
			F0000007:'0',
			F0000012:'0',
			F0000013:'0',
			F0000014:'0',
			F0000015:'0',
			F0000016:'0',
			F0000017:'0',
			F0000018:'0',
			F0000019:'0',
			sjsbData: [
			  {
				label: '非法跨越国边境',
				rate: 0,
			  },
			  {
				label: '设施设备损坏',
				rate: 0,
			  },
			  {
				label: '破坏 ',
				rate: 0,
			  },
			  {
				label: '线索上报',
				rate: 0,
			  },
			],
		}
	},
  components: {
    ModuleBorderDuty,
    ModuleReportIncidentToday,
    ModuleReportIncident,
    ModuleCaptureResult,
    ModuleMapInfo,
  },
  methods: {
    ...mapMutations({
      // 设置点位
      setMarkers: 'map/SET_MARKERS',
      // 清除点位
      clearMarkers: 'map/CLEAR_MARKERS',
      setNetworkError: 'network/SET_NETWORK_ERROR',
    }),
    queryData() {
      let _self = this;
      _self.$axios.get('http://221.213.128.102:5000/0692//mappoint/mapPoint/getCYData?ActionName=geBJFKInfo&AppCode=D147210cyApi&Controller=ZTGLApiController&dataPrams={}').then(res => {
        if (res.data.success) {
          // debugger
          var re = res.data.result;
          var list = eval('(' + re + ')')
          var data = eval("(" + list.ReturnData.rsData + ")")
          _self.F0000001 = data[0].F0000001;
          _self.F0000002 = data[0].F0000002;
          _self.F0000003 = data[0].F0000003;
          _self.F0000005 = data[0].F0000005;
          _self.F0000006 = data[0].F0000006;
          _self.F0000007 = data[0].F0000007;
          _self.F0000012 = data[0].F0000012;
          _self.F0000013 = data[0].F0000013;
          _self.F0000014 = data[0].F0000014;
          _self.F0000015 = data[0].F0000015;
          _self.F0000016 = data[0].F0000016;
          _self.F0000017 = data[0].F0000017;
          _self.F0000018 = data[0].F0000018;
          _self.F0000019 = data[0].F0000019;
          let count = parseInt(data[0].F0000008) + parseInt(data[0].F0000009) + parseInt(data[0].F0000010) + parseInt(data[0].F0000011);
          _self.sjsbData[0].rate = count === 0 ? 0 : parseFloat(data[0].F0000008 / count * 100).toFixed(2);
          _self.sjsbData[1].rate = count === 0 ? 0 : parseFloat(data[0].F0000009 / count).toFixed(2);
          _self.sjsbData[2].rate = count === 0 ? 0 : parseFloat(data[0].F0000010 / count).toFixed(2);
          _self.sjsbData[3].rate = count === 0 ? 0 : parseFloat(data[0].F0000011 / count).toFixed(2);

        } else {
          alert(res.data.message)
        }
      }).catch(err => {
        this.setNetworkError();
      })
    },
    mockRenderMarkers() {
      let _self = this;
      // debugger
      _self.$axios.get('http://221.213.128.102:5000/0692//mappoint/mapPoint/getCYData?ActionName=geBJFKPoint&AppCode=D147210cyApi&Controller=ZTGLApiController&dataPrams={"dataName":"边境防控"}')
          .then(res => {
            if (res.data.success) {
              // debugger
              var re = res.data.result;
              var list = eval('(' + re + ')')
              var data = []
              if (list.ReturnData.rsData != "")
                data = eval("(" + list.ReturnData.rsData + ")")
              console.log(data);
              var datas = [];
              data.forEach(function (item) {
                var dataJson = {}
                dataJson["lat"] = item.F0000004;
                dataJson["lng"] = item.F0000010;
                dataJson["label"] = item.F0000003;
                dataJson["type"] = "green";
                datas.push(dataJson)
              })

              this.setMarkers(datas);
            } else {
              alert(res.data.message)
            }
          }).catch(err => {
        this.setNetworkError();
      })

    }
  },
  mounted() {
  	  this.queryData();
	  this.mockRenderMarkers();
  	  this.timer = setInterval(() => {
  	         setTimeout(this.queryData(), 0)
  	   }, 2000*60)
  }
}
</script>

<style lang="scss" scoped>
.page-2{
  flex: 1;
  display: flex;
  .side-bar{
    display: flex;
    flex-direction: column;
    padding-left: rem(80);
  }
  .center{
    flex: 1;
  }
}
</style>
